<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <!--  基础题库 -->
         <QuesTionsl @search="search"></QuesTionsl>
        <template>
          <div class="qwwewq">数据一{{randomsListCounts}} 共条</div>
        </template>
        <!--   表单 -->
      </el-card>
      <el-table :data="list">
        <el-table-column prop="number" label="试题编号"></el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template v-slot="{row}">
             <span>{{row.questionType===1?"单选":"多选"}} </span>
          </template>
        </el-table-column>
        <el-table-column  prop="question" label="题干">
          <template v-slot="{row}">
             <span ref="xxx" v-html="row.question"> </span>
          </template>
           </el-table-column>
        <el-table-column width="174px" prop="addDate" label="录入时间">
          <template v-slot="{row}">
            <span>{{$moment (row.addDate).format("YYYY-MM-DD HH:MM:SS")}} </span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template v-slot="{row}">
            <!--      三元表达式  只能判断两个条件     所以这里要 用 v-if   v-else -->
            <!--   row.difficulty    拿到呢 是 字符串类型 -->
            <span v-if="row.difficulty==='1'">简单</span>
            <span v-else-if="row.difficulty==='2'">一般</span>
            <span v-else>困难 </span>
          </template>
           </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column class="operate" prop="answer" align="center" label="操作" width="200px">
          <template slot-scope="{ row }">
            <!--   ↓  type="primary"   高亮颜色  -->
            <el-button size="small" type="primary" icon="el-icon-view" circle class="preview" @click="preview(row.id)"></el-button>
            <el-button size="small" type="success" icon="el-icon-edit" circle class="update" @click="$router.push('/questions/new')"></el-button>
            <el-button size="small" type="danger"  icon="el-icon-delete" circle class="deleted" @click="deleted(row)"></el-button>
            <el-button size="small" type="warning" icon="el-icon-check" circle class="favourite" @click="favourite(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
<!--    分页   -->
       <el-row type="flex" justify="end">
         <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage4"
             :page-sizes="[5, 10, 20, 30]"
             :page-size="5"
             layout="total, sizes, prev, pager, next, jumper"
             :total="randomsListCounts">
           </el-pagination>
       </el-row>
    </div>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '../../api/hmmm/questions'
import QuesTionsl from './companys/QuesTionsl.vue'
// import Preview from './companys/preview.vue'

export default {
  components: {
    QuesTionsl
    // Preview
  },
  data () {
    return {
      // questionsList: [],

      randomsListCounts: null,
      page: 1,
      pagesize: 5,
      Tabbed: [],
      currentPage4: 1, //  打来默认 显示 第一页
      list: [],
      citys: [],
      showDialog: false,
      subjectName: '',
      difficulty: '',
      provinces: [],
      cityname: '',
      area: [],
      tagName: '',
      questionType: '',
      direction: '',
      creator: '',
      tags: '',
      subjectID: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    //   获取列表
    async getList () {
      const res = await list({ page: this.page, pagesize: this.pagesize })
      this.list = res.data.items
      this.randomsListCounts = res.data.counts
      this.Tabbed = res.data.items
      console.log(res)
      //    分页
    },

    async search (val) {
      // console.log(val)
      this.getList(val)
    },

    // 分页器
    //  每页多少条
    handleSizeChange (page) {
      this.page = page
      this.getList()
      console.log(page)
    },
    //  当前那一页
    handleCurrentChange (newPage) {
      this.randomsListCounts = newPage
      this.getList()
      console.log(newPage)
    },
    /**
     * @description 删除
     * 1. 删除按钮上绑定点击事件,方法传参,id值如何从当行中中获取,看UI文档获取当前行数据
     * 2. 二次确认,modal确认框,避免误操作
     * 3. 点击modal弹框确认按钮之后的操作,调用接口 删除数据
     * 4. 接口调用成功,删除成功之后的操作: message弹框提示并重新加载表格数据
     * */
    deleted (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'info'
      })
        .then(() => {
          this.deleteConfirm(row)
        })
        .catch(() => {
          this.$message({
            message: '已取消删除'
          })
        })
    },
    async deleteConfirm (row) {
      const res = await remove(row)
      // console.log(res)
      if (res.data.success) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getList()
      } else {
        this.$message({
          message: '删除失败',
          type: 'error'
        })
      }
    },
    //   加入 精选
    preview (id) {
      this.$refs['ref-preview'].showPreviewDialog(id)
    },
    async favourite (id) {
      const res = await choiceAdd({ id: id, choiceState: 1 })
      if (res.data.success) {
        this.$message({
          message: '加入成功',
          type: 'success'
        })
        this.getList()
      } else {
        this.$message({
          message: '加入失败',
          type: 'error'
        })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.shuoming {
  height: 100%;
  font-size: 12px;
  color: pink;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.qwwewq {
  background-color: #f4f4f5;
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
}
.preview {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}
.update {
    color: #67c23a;
    background: #f0f9eb;
    border-color: #c2e7b0;
}
.deleted {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
}
.favourite {
    color: #e6a23c;
    background: #fdf6ec;
    border-color: #f5dab1;
}
</style>
